<!-- 选择成员 [ html ] -->
<template>
  <div class="home">
    <!--头部搜索框 START-->
    <div class="head">
      <div class="search">
        <div class="icon_search" />
        <input v-model="searchData.userName" type="text" placeholder="搜索成员" @input="searchUser">
      </div>
    </div>
    <div class="checked">
      已选择成员(<span>{{ tableData.checkedList.length }}</span>)
    </div>
    <!--头部搜索框 END-->
    <!-- 选择成员 BODY START-->
    <div class="selectMember">
      <!--成员列表主体 START-->
      <div class="searchContent">
        <el-table ref="multipleTable" :data="tableData.userList" :show-header="false" tooltip-effect="dark" style="width:80%;margin: 0 auto" :row-style="cellstyle" @cell-click="chenageSelect">
          <el-table-column prop="userName" style="width:80%;font-size:16px;" />
          <el-table-column width="40">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.checked" @change="chenageSelect(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--成员列表主体 END-->
    </div>
    <div class="btn_confirm" @click="toConfirm">确定</div>
    <!-- 选择成员 BODY END-->
  </div>
</template>
<script>



import _validate from '../commonJs/wptx_validate'
import _tools from '../commonJs/wptx_tools'
import _common from '../commonJs/wptx_common'
import _usermanagerAPI from '../API/usermanagerapi'
const _FUNCTION_NAME = _common.pageName.WPTXSELECTUSER
export default {

  /*              页面引用的通用模板 START              */





  data() {



    return {

      tableData: {
        userList: [], // 用户列表信息
        checkedList: [
          // 已选用户列表(通过打钩获得)
          // checked: 是否已选 true false
          // id: 成员id （从后台取回的成员列表中的id)
          // userName: 用户名
          // wechatUserId: 企业微信id
        ],
        userListBackup: [] // userList备份，用户搜索结果修改userList数据后成员列表重新反显
      },

      searchData: {
        userName: '' // 搜索框输入用户的名称
      },

      searchDataBuffer: {},

      pageData: {},

      dialogData: {},

      historyData: {},

      infoData: {},



      customData: {},
      PageStatus: 4,
      // 页面配置信息
      selectMemberSet: {
        // checkMore = false //true多选/false单选
        // yesToNull = false //true可空/false不可空
        // checkedList = [] //反显列表
        // title = '' //title信息
      }
    }
  },
  created() {
    const self = this
    self.selectMemberSet = JSON.parse(
      _tools.getSessionStorage('selectMemberSet')
    )
    if (self.selectMemberSet == null) {
      _tools.openTip(self, '网络异常，请重试', 'warning')
      setTimeout(function() {
        self.$router.go(-1) //
      }, 2000)
      return
    } else {
      // 清空之前的选择信息
      const nu = []
      _tools.saveSessionStorage('fromSelectMember', JSON.stringify(nu))
    }
  },
  mounted() {
    const self = this
    self.onInit()
  },
  methods: {
    onInit() {
      // get门店成员信息
      const self = this
      const data = {
        storeId: JSON.parse(sessionStorage.getItem('context')).storeId
      }
      if (_validate.checkEmpty(data.storeId)) {
        _tools.openTip(self, '网络异常，请重试', 'warning')
        return
      }
      _usermanagerAPI.userList(self, data, self.callBack_init)
    },
    onSearch() {},
    onChangePage() {},
    onReset() {},
    ONadd() {},
    onDelete(data) {},
    onInfo(data) {},
    onUpdate(data) {},
    onBathDelete() {},
    onBathUpdate() {},
    onDisable(data) {},
    onEnable(data) {},
    onUpload() {},
    onBathUpload() {},
    onExport() {},
    onDownload() {},
    onHistory() {},
    callBack_init(res) {
      const self = this
      if (res.data == 0) {
        _tools.openTip(self, '无成员信息', 'warning')
      } else {
        let idlist = []
        if (_validate.checkListEmpty(self.selectMemberSet)) {
          idlist = []
          for (var j = 0; j < res.data.length; j++) {
            res.data[j].checked = false
          }
        } else {
          for (var i = 0; i < self.selectMemberSet.checkedList.length; i++) {
            idlist.push(self.selectMemberSet.checkedList[i].wechatUserId)
          }
          for (var j = 0; j < res.data.length; j++) {
            if (idlist.indexOf(res.data[j].wechatUserId) != -1) {
              res.data[j].checked = true
              self.tableData.checkedList.push(res.data[j])
            } else {
              res.data[j].checked = false
            }
          }
        }
        self.tableData.userList = _tools.cloneObj(res.data) // 将完善后的数据放到userList中去用于回显
        self.tableData.userListBackup = _tools.cloneObj(res.data) // 备份数据 用于搜索不到用户后回显
      }
    },
    chenageSelect(row, column, cell, event) {
      row.checked = !row.checked
      const that = this
      if (!that.selectMemberSet.checkMore) {
        if (row.checked) {
          that.tableData.userList.forEach(item => {
            if (item.wechatUserId !== row.wechatUserId) {
              item.checked = false
            }
          })
          that.tableData.userListBackup.forEach(item => {
            if (item.wechatUserId !== row.wechatUserId) {
              item.checked = false
            }
          })
          that.tableData.checkedList = [] // 先清空
          that.tableData.checkedList.push(row) // 将所选数据放到checkedList
        } else {
          that.tableData.checkedList = []
        }
      } else {
        if (row.checked) {
          that.tableData.checkedList.push(row) // 将所选数据放到checkedList
        } else {
          that.tableData.checkedList.some((item, index) => {
            if (item.wechatUserId == row.wechatUserId) {
              that.tableData.checkedList.splice(index, 1)
            }
            return item.wechatUserId == row.wechatUserId
          })
        }
      }
    },
    toConfirm() {
      const self = this
      if (!self.selectMemberSet.yesToNull) {
        if (self.tableData.checkedList.length == 0) {
          _tools.openTip(self, '请选择成员', 'warning')
        } else {
          window.sessionStorage.removeItem('selectMemberSet') // 清空配置session
          _tools.saveSessionStorage(
            'fromSelectMember',
            JSON.stringify(self.tableData.checkedList)
          )
          self.$router.go(-1) //
        }
      } else {
        window.sessionStorage.removeItem('selectMemberSet') // 清空配置session
        _tools.saveSessionStorage(
          'fromSelectMember',
          JSON.stringify(self.tableData.checkedList)
        )
        self.$router.go(-1) //
      }
    },
    searchUser() {
      const self = this
      const searchName = self.searchData.userName
      if (searchName != '') {
        setTimeout(() => {
          self.tableData.userList = self.tableData.userListBackup.filter(
            item => {
              if (_validate.checkKong(item.userName)) {
                return false
              } else {
                return (
                  item.userName
                    .toLowerCase()
                    .indexOf(searchName.toLowerCase()) > -1
                )
              }
            }
          )
        }, 200)
      } else {
        self.tableData.userList = _tools.cloneObj(
          self.tableData.userListBackup
        )
      }
    },
    cellstyle({ row, rowindex }) {
      return 'font-size:16px;font-weight:400;' + 'color:rgba(0,0,0,1);'
    }
  }
}
</script>
<style>
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #ffffff;
}
</style>

<style scoped>
.home {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  background: #ffffff;
}
.selectMember {
  width: 100%;
  height: calc(100% - 150px);
  overflow: auto;
}
.head {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search {
  width: 346px;
  height: 32px;
  border-radius: 16px;
  border: 1px solid rgba(204, 204, 204, 1);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.icon_search {
  width: 17px;
  height: 17px;
  background: url("../../../../static/images/query.png") no-repeat center center;
  background-size: contain;
  margin-left: 13px;
  margin-right: 5px;
}
.search input {
  border: none;
}
.btn_confirm {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  background: rgba(0, 113, 206, 1);
}
.checked {
  width: 80%;
  margin: 0px auto;
  height: 50px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  line-height: 50px;
  text-align: left;
}
</style>
